<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/resrt.css">
    <link rel="stylesheet" href="css/huan.css">
</head>
<body>
    
</body>
</html>
<script>
    class Bom {
        constructor(arr){
            this.data = arr
            this.num = 0
            this.h3 = null
            this.box = null
            this.render_news()
            this.apply()
            this.click()
        }
        render_news(){
            let bom = document.createElement('div')
            bom.classList.add('bigbox')
            let body = document.body
            let top = document.createElement('div')
            top.classList.add('top')
            let h2 = document.createElement('h2')
            h2.innerText = '百度新闻'
            let h3 = document.createElement('h3')
            h3.innerText = '换一批'
            this.h3 = h3
            let box = document.createElement('div')
            box.classList.add('box')
            this.box = box
            top.appendChild(h2)
            top.appendChild(h3)
            bom.appendChild(top)
            bom.appendChild(box)
            body.appendChild(bom)
        }
        apply(){
            let num = 0
            for(this.num ; this.num < this.data.length ; this.num++){
                let list = document.createElement('div')
                list.classList.add('list')
                list.innerText = this.data[this.num]
                this.box.appendChild(list)
                num++
                if(num == 10){
                    break
                }
            }
        }
        clear(){
            var clear = [...this.box.querySelectorAll('.list')]
            for (var i = 0; i < clear.length; i++) {
                this.box.removeChild(clear[i])
            }
        }
        click(){
            this.h3.onclick = () => {
                this.clear()
                this.apply()
            }
        }
    }

    var arr = [1,2,3,4,5,6,7,8,9,0,8,65,4,321,4213,1,245,146,1,461,46,14,123,416,658,456,76,354,3415,23,462,46,354,46,234,5,2347345,87,65,652335,234,52,345,234523,45,245,2,346,43,37,465,5765312,4,2245,33,,68,56756435,4247,567,68,65,54764,6]
    var fn = new Bom(arr)
</script>